<template>
	<view class="qilin-personalHeader">
		<view class="qilin-personalHeader-image">
			<image src="https://wx1.sinaimg.cn/bmiddle/006aaKeggy1gwh2bp2ucjj30g40cst8y.jpg"></image>
		</view>
		<view class="qilin-personalHeader-me">
			<image class="qilin-personalHeader-me-photo" src="../static/imgs/avator.jpg"></image>
			<view class="qilin-personalHeader-me-button">
				<view class="qilin-personalHeader-me-button-edit" @click="switchToChangeInfo()">编辑资料</view>
				<icon class="qilin-personalHeader-me-button-add iconfont icon-jia"></icon>
			</view>
		</view>
		<view class="qilin-personalHeader-info">
			<view class="qilin-personalHeader-info-name">烟锁湖堤柳，肴盘杯斟酌！</view>
			<view class="qilin-personalHeader-info-number">抖音号：EDGQiLin</view>
			<view class="qilin-personalHeader-info-label-box">
				<view class="qilin-personalHeader-info-label-tip">你还没有填写个人简介，点击添加...</view>
				<view class="qilin-personalHeader-info-label">
					<text>南京</text>
					<text>巢湖学院</text>
					<text>+添加年龄学校等标签</text>
				</view>
			</view>
			<view class="qilin-personalHeader-info-sort">
				<text><text>0</text> 获赞</text>
				<text><text>37</text> 关注</text>
				<text><text>2</text> 粉丝</text>
			</view>
			<view class="qilin-personalHeader-info-add">+添加随拍</view>
		</view>
		<view class="qilin-personalHeader-video">
			<view class="qilin-personalHeader-video-tab">
				<view class="qilin-personalHeader-video-tab-item" :class="index==1?'is-active':''" @click="changeTab(1)">作品</view>
				<view class="qilin-personalHeader-video-tab-item" :class="index==2?'is-active':''" @click="changeTab(2)">动态</view>
				<view class="qilin-personalHeader-video-tab-item" :class="index==3?'is-active':''" @click="changeTab(3)">喜欢</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"personalHeader",
		data() {
			return {
				index:1,//当前所在索引
			};
		},
		methods:{
			//点击tab标签切换事件监听
			changeTab(index){
				this.index=index;
				this.$emit("change",index);
			},
			//点击编辑资料进入修改个人页面事件监听
			switchToChangeInfo(){
				uni.navigateTo({
					url:"/pages/changeInfo/changeInfo"
				});
			}
		}
	}
</script>

<style>
.qilin-personalHeader{
	position:relative;
	width:100%;
}
.qilin-personalHeader-image>image{
	width:100%;
	height:400rpx;
}
.qilin-personalHeader-me{
	position:absolute;
	top:300rpx;
	left:0;
	width:100%;
	z-index:1;
	display:flex;
	background-color:#181725;
	color:#fff;
	font-size:24rpx;
	padding:20rpx;
	box-sizing:border-box;
	justify-content:space-between;
}
.qilin-personalHeader-me-photo{
	width:100rpx;
	height:100rpx;
	border-radius:50%;
	border:5rpx solid #181725;
	position: absolute;
	top:-20rpx;
	left:30rpx;
}
.qilin-personalHeader-me-button{
	width: 100%;
	margin-left: 160rpx;
	display:flex;
}
.qilin-personalHeader-me-button-edit{
	padding:12rpx;
	background-color:#3b3b44;
	flex:1;
	text-align:center;
}
.qilin-personalHeader-me-button-add{
	background-color:#3b3b44;
	margin-left:5rpx;
	width: 60rpx;
	text-align: center;
	height: 60rpx;
	line-height: 60rpx;
}
.qilin-personalHeader-info{
	padding:20rpx;
	color:#fff;
}
.qilin-personalHeader-info-name{
	font-size:30rpx;
	font-weight:bolder;
}
.qilin-personalHeader-info-number{
	font-size:20rpx;
	padding:10rpx 0 20rpx 0;
}
.qilin-personalHeader-info-label-box{
	border-top:1rpx solid #ccc;
	padding-top:6rpx;
}
.qilin-personalHeader-info-label-tip{
	padding:10rpx 0;
	font-size:22rpx;
}
.qilin-personalHeader-info-label{
	padding:10rpx 0;
}
.qilin-personalHeader-info-label>text{
	background-color:#3B3B44;
	padding:8rpx 12rpx;
	margin:0 6rpx 10rpx 0;
	font-size:20rpx;
	color:#ccc;
}
.qilin-personalHeader-info-sort{
	padding:12rpx 0;
}
.qilin-personalHeader-info-sort>text{
	margin-right:30rpx;
	font-weight:bolder;
	font-size:24rpx;
}
.qilin-personalHeader-info text{
	font-size:20rpx;
	color:#ccc;
}
.qilin-personalHeader-info-add{
	text-align:center;
	background-color:#3B3B44;
	padding:15rpx;
	margin:12rpx 0;
	box-sizing: border-box;
	font-size:24rpx;
	border-radius:5rpx;
}
.qilin-personalHeader-video{
	margin-top:10rpx;
}
.qilin-personalHeader-video-tab{
	display:flex;
}
.qilin-personalHeader-video-tab-item{
	flex:1;
	text-align:center;
	font-size:28rpx;
	color:#ccc;
	padding:12rpx;
}
.qilin-personalHeader-video-tab-item.is-active{
	border-bottom:6rpx solid yellow;
}
</style>
